<template>
  <div class="bardc">


    <div id="head">
      <div class="SearchBox">
        <i class="icon-search"></i>
        <input type="text" placeholder="搜索" id="" />

      </div>
      <div class="head-right">
        <div class="fivebox">
          <img src="../imges/five.png" width="33px" height="33px" alt="" />
        </div>
        <div class="manbox">
          <img src="../imges/man.png" width="29px" height="33px" alt="" />
          <!-- <router-link :to="{name:'Mylogin'}"><img src="../imges/man.png" width="29px" height="33px" alt="" /></router-link> -->
        </div>
      </div>
    </div>
    <div class="bodybox">
      <p>我的家</p>
      <div class="catbox">
        <img src="../imges/cathome.png" width=" 110px" height="115px" alt="" />
      </div>
      <p>Welcome</p>
      <div class="b-box">
        <div><img src="../imges/mood.png" alt="" />
          <p>行为训练</p>
        </div>
        <div><img src="../imges/book.png" alt="" />
          <p>养猫须知</p>
        </div>
        <div><img src="../imges/pen.png" alt="" />
          <p>记录</p>
        </div>
      </div>
      <div class="toolbox">
        <div>养宠工具<img src="../imges/tool.png" alt="" /></div>
        <div>疾病自查<img src="../imges/disease.png" alt="" /> </div>
      </div>

    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePage",
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.bardc {
  width: 100%;
  min-height: 100vh;
  background: url("../img/custom\ –\ 8.png") center center no-repeat;
  background-size: 100% 100%;
}

#head {
  width: 100%;

  height: 70px;
  display: flex;
  flex-wrap: wrap;
}


.SearchBox {
  height: 70px;
  width: 100%;
  background-color: #ff8c00;

  input {
    width: 150px;
    height: 30px;
    border-radius: 30px;
    padding-left: 40px;
    margin-left: 23px;
    margin-top: 25px;
    border: none;
    font-size: 5px;
  }
}

.SearchBox .icon-search {
  background: url(../imges/search.png) no-repeat;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 30px;
  left: 30px;
}
.head-right{
 width: 100px;
 height: 60px;
 position: absolute;
 right: 15px;
 top: 20px;
 
}
.head-right div{
  width: 40px;
  float: left;
}


.bodybox {
  /* background-color: papayawhip; */
  /* width: 324px;
  height: 480px;
  background: url(../imges/body.png) center no-repeat; */
}

p {
  padding: 9px;
  text-align: center;
  /* background-color: brown; */
}

.catbox {
  width: 111px;
  height: 111px;
  background-color: #ff8c00;
  margin-left: 130px;
  border-radius: 10%;
}

.b-box {
  width: 100%;
  height: 88px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.b-box div {
  height: 88px;
  width: 88px;
  background-color: white;
  margin-left: 18px;
  margin-top: 6px;
  border-radius: 11%;
  border: black solid 1px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.b-box img {
  width: 40px;
  height: 40px;
  margin-top: 8px;

}

// .bookbox {
//   width: 88px;
//   height: 88px;
//   background-color: white;
//   display: flex;
//   margin-left: 119px;
//   margin-top: -87px;
//   border-radius: 11%;
//   border: black solid 1px;
//   flex-wrap: wrap;
//     justify-content: center;
// }
// .penbox {
//   width: 88px;
//   height: 88px;
//   background-color: white;
//   display: flex;
//   margin-left: 219px;
//   margin-top: -87px;
//   border-radius: 11%;
//   border: black solid 1px;
//   flex-wrap: wrap;
//     justify-content: center;
// }
.toolbox {
  margin-top: 40px;
}

.toolbox div {
  width: 305px;
  height: 68px;
  background-color: pink;
  margin-left: 44px;
  border-radius: 22px;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;

}

.toolbox img {
  width: 30px;
  height: 35px;
}</style>